<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>会员中心</title>
  <link rel="stylesheet" type="text/css" href="../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../css/vip.css" />
</head>

<body>
  <div id="app" v-cloak>
    <div class="wrap flex-wrap flex-vertical">
      <header id="header">
        <div class="header-wrap">
          <div @click="goback" class="header-left">
            <i class="iconfont icon-pre"></i>
          </div>
          <div class="header-title">{{info.level == '0' ? '开通VIP会员' : '续费'}}</div>
        </div>
      </header>
      <div id="vip-main" class="flex-con">
        <div class="vip-option-list">
          <div class="option-item" v-for="(item, index) in list" :key="index" @click="selectVipOption(index)">
            <div class="option-intro">
              <div class="title">
                <span class="name">{{item.name}}</span>
                <span class="price">￥{{item.price}}</span>
                <span class="gold">赠送{{item.gold}}港币</span>
              </div>
              <div class="desc">原价：￥{{item.original}}</div>
            </div>
            <div class="option-value">
              <i v-if="vip_option_index == index" class="iconfont icon-right-1"></i>
              <i v-else class="iconfont icon-yuanquan"></i>
            </div>
          </div>
        </div>
        <div class="pay-wrap">
          <button @click="pay" type="button">{{info.level == '0' ? '开通VIP会员' : '续费'}}</button>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
  var app;
  apiready = function () {
    $api.fixStatusBar($api.dom('#header'));
    api.setStatusBarStyle({
      style: 'light',
    });
    app = new Vue({
      el: '#app',
      data: {
        info: !!api.pageParam.info ? api.pageParam.info : {},
        list: !!api.pageParam.list ? api.pageParam.list : [],
        vip_option_index: 0,
        isPaying: false,
      },
      created: function () {
        var _this = this;
        api.addEventListener({
          name: 'keyback'
        }, function(ret, err){
          if (_this.isPaying) {
            api.closeFrame({
              name: 'pay_frame'
            });
            _this.isPaying = false;
          } else {
            _this.goback();
          }
        });
        api.addEventListener({
          name: 'setPaying_false'
        }, function(ret, err){
          _this.isPaying = false;
        });
      },
      mounted: function () {
        var _this = this;
        if (!api.pageParam.info) {
          _this.getPayVip();
        }
      },
      methods: {
        goback: function () {
          api.sendEvent({
            name: 'vip_refresh',
          });
          api.closeWin();
        },

        getPayVip: function () {
          var _this = this;
          api.showProgress({
            title: '',
            text: '',
          });
          api.ajax({
            url: baseUrl + 'pay/vip',
            method: 'get',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: {
                uid: $api.getStorage('uid')
              },
            }
          }, function (ret, err) {
            api.hideProgress();
            if (ret.status == 200) {
              _this.info = ret.data.info;
              _this.list = ret.data.list;
            }
          })
        },

        selectVipOption: function (index) {
          this.vip_option_index = index;
        },

        pay: function () {
          var _this = this;
          _this.isPaying = true;
          // var tempExtra = {
          //   fromId: $api.getStorage('uid'),
          //   fromName: $api.getStorage('uname'),
          //   fromAvatar: $api.getStorage('uavatar'),
          //   toId: '2',
          //   toName: '官方客服',
          //   toAvatar: 'http://file.xdhld.top/default.png',
          //   from: 'pay',
          //   type: 'vip',
          //   price: _this.list[_this.vip_option_index].price,
          // }
          // api.openWin({
          //   name: 'im',
          //   url: 'im.html',
          //   pageParam: tempExtra
          // });
          // return false;
          api.ajax({
						url: baseUrl + 'device/index',
						method: 'get',
						data: {}
					}, function (ret, err) {
						if (ret.status == 200) {
              if (ret.data.pay == '1') {
                // 官方支付
                api.openFrame({
                  name: 'pay_frame',
                  url: 'pay_frame.html',
                  rect: {
                    x: 0,
                    y: 0,
                    w: api.winWidth,
                    h: api.winHeight
                  },
                  pageParam: {
                    title: 'vip充值',
                    type: 'vip',
                    tid: _this.list[_this.vip_option_index].id,
                    price: _this.list[_this.vip_option_index].price,
                  }
                });
              }
              if (ret.data.pay == '2') {
                // 免签支付
                api.openFrame({
                  name: 'pay_frame2',
                  url: 'pay_frame2.html',
                  rect: {
                    x: 0,
                    y: 0,
                    w: api.winWidth,
                    h: api.winHeight
                  },
                  pageParam: {
                    title: 'vip充值',
                    type: 'vip',
                    tid: _this.list[_this.vip_option_index].id,
                    price: _this.list[_this.vip_option_index].price,
                  }
                });
              }
						} else {
              api.toast({
                msg: '服务器繁忙，请稍后再试',
                duration: 2000,
                location: 'bottom'
              });
            }
					});
        },
      },

    })
  }
</script>